<template>
    <div>
        <a-space :size="10">
            <div v-if="selectItems.length">
                <a-space :size="10">
                    <a-dropdown>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item type="link" :class="item.name == '删除' ? 'text-red-500' : ''" v-for="(item, index) in props.tableConfig.batchGroup" :key="index" @click="clickEvent(item)"> {{ item.name }}已选（{{ selectItems.length }}） </a-menu-item>
                                <a-menu-item key="6" @click="cancelSelect"> 重置已选项 </a-menu-item>
                            </a-menu>
                        </template>
                        <div class="relative">
                            <a-button>
                                批量操作
                                <sysIcon style="font-size: 12px; color: #999999" type="system-changyong_zhankai"></sysIcon>
                            </a-button>
                        </div>
                    </a-dropdown>
                    <!-- <div class="flex-center" v-show="selectItems.length">
                        已选 <b class="ml-1 mr-1" :style="'font-size:18px;color:'+state.store.config.primaryColor">{{selectItems.length}}</b>条 | 批量
                    </div> -->
                    <!-- <div v-for="(item,index) in props.tableConfig.batchGroup" :key="index">
                        <a-popconfirm v-if="item.name == '删除'" placement="right" :title="'该操作将批量'+item.name+'所选项'" ok-text="确认删除" cancel-text="取消" @confirm="clickEvent(item)">
                            <a-button danger>
                                {{item.name}}
                            </a-button>
                        </a-popconfirm>
                        <a-button v-else @click="clickEvent(item)">
                            {{item.name}}
                        </a-button>
                    </div>
                    <a-button @click="cancelSelect" v-show="selectItems.length">
                        取消
                    </a-button> -->
                </a-space>
            </div>
            <div class="font-bold" v-else>
                <a-button v-for="(item, index) in props.tableConfig.batchGroup" :key="index" @click="clickEvent(item)"> 导出 </a-button>
            </div>
        </a-space>
    </div>
</template>
<script setup>
const props = defineProps({
    xGrid: null,
    tableConfig: null,
    exportData:null,
})
let state = reactive({
    importModelRef: null,
    selectItems: [],
    batchGroup: [],
    showExportBut: false,
    store: useStore(),
})

//【导出全部】按钮根据按钮组显示或隐藏
if (props.tableConfig.batchGroup && props.tableConfig.batchGroup.length) {
    for (let index = 0; index < props.tableConfig.batchGroup.length; index++) {
        const element = props.tableConfig.batchGroup[index]
        if (element.name == '导出') {
            state.showExportBut = true
        }
    }
}

//取消勾选
const cancelSelect = () => {
    state.selectItems = []
    props.xGrid.clearCheckboxRow()
    props.xGrid.clearCheckboxReserve()
}
//批量操作
const clickEvent = item => {
    if (item.name === '删除') {
        Modal.confirm({
            title: '重要提示',
            content: `确认${item.name}所选项？`,
            onOk() {
                ajax()
            },
            onCancel() {},
        })
    } else {
        ajax()
    }
    function ajax() {
        let ids = []
        if (state.selectItems && state.selectItems.length) {
            state.selectItems.forEach(element => {
                ids.push(item.rowId?element[item.rowId]:element.id || '')
            })
        }
        if (item) {
            item.params[item.key] = ids.toString()
        } else {
            //批量导出
            return
        }
        Object.assign(props.exportData, { pageNo: 1, pageSize: 20 })
        Object.assign(item.params, props.exportData)
        axios.post(item.url, item.params).then(res => {
            if (!res.data.success) return
            cancelSelect()
            message.success('导出文件稍后会以工作通知发送给您！')
            props.xGrid.commitProxy('query')
        })
    }
}

const setSelectItems = val => {
    state.selectItems = val
}
defineExpose({
    setSelectItems,
})
const { selectItems, importModelRef } = toRefs(state)
</script>
